<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@page contentType="text/html;charset=UTF-8" %>
<div class="grid_19 clearfix">


<div class="account_section">
<h1>My Personal Data</h1>

<div class="account_wrapper">

    <c:if test="${isEdit}">
        <div id="message_indicator" class="message_border clearfix">
            <dl id="address_message" class="success">
                <dd>
                    <img src="resource_account_files/icon_mes.png" alt="">
                </dd>
                <dd>
                    <h2>
                        Personal Data was changed successfully
                    </h2>
                </dd>
            </dl>
        </div>
    </c:if>
    <c:if test="${ isEditPassword}">
        <div id="message_indicator" class="message_border clearfix">
            <dl id="address_message" class="success">
                <dd>
                    <img src="resource_account_files/icon_mes.png" alt="">
                </dd>
                <dd>
                    <h2>
                        Password was changed successfully
                    </h2>
                </dd>
            </dl>
        </div>
    </c:if>

    <p class="required_caption">
        Fields marked * are required
    </p>


    <form:form action="/myAccountUserEdit"    modelAttribute="userd"
          method="post"
          class="registration_form">
        <fieldset>
            <input type="hidden" name="dwfrm_profile_securekey" value="1233957335">
            <div class="form_field title">
                <div class="input_value">
                    <label>
                        <em>*</em>
                        Title:
                    </label>
                    <div class="value">
                        <form:select class="selectbox required" id="dwfrm_profile_customer_title"  path="title">
                            <option class="selectoption" label="Please select" value="0">Please select</option>
                            <form:option class="selectoption" label="Mr" value="Mr.">Mr</form:option>
                            <form:option class="selectoption" label="Mrs" value="Mrs.">Mrs</form:option>
                            <form:option class="selectoption" label="Miss" value="Miss">Miss</form:option>


                        </form:select>


                        <span class="hidden json">{label:"Title"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


                    </div>


                </div>
            </div>


            <div class="form_field">


                <label>     <em>*</em>
                    First Name:
                </label>
                <div class="value">
                    <form:input path="firstName" class="textinput required" id="dwfrm_profile_customer_firstname"
                                maxlength="15"/>
                    <%--<input class="textinput required" id="dwfrm_profile_customer_firstname" type="text"
                           name="dwfrm_profile_customer_firstname" value="sunny" maxlength="15">--%>
                    <!-- display text area input field -->
                    <span class="hidden json">{label:"First Name"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->
                </div>
            </div>
            <div class="form_field">
                <label>
                    <em>*</em>
                    Last Name:
                </label>
                <div class="value">
                    <%--<input class="textinput required" id="dwfrm_profile_customer_lastname" type="text"
                           name="dwfrm_profile_customer_lastname" value="sun" maxlength="26">--%>
                    <!-- display text area input field -->
                        <form:input path="lastName" class="textinput required" id="dwfrm_profile_customer_lastname" type="text"
                                    maxlength="26"/>

                    <span class="hidden json">{label:"Last Name"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


                </div>


            </div>


            <div class="form_field">


                <label>


                    <em>*</em>


                    Email:

                </label>


                <div class="value">


                    <%--<input class="textinput required" id="dwfrm_profile_customer_email" type="text"
                           name="dwfrm_profile_customer_email" value="sunny243788557@163.com" maxlength="50">--%>
                    <!-- display text area input field -->
                        <form:input path="email" class="textinput required" id="dwfrm_profile_customer_email" type="text"
                                    maxlength="50"/>

                    <span class="hidden json">{label:"Email"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


                </div>


                <span class="email_message">Remember that your email address is also your account username, so changing your email                                         address will also change your account username.</span>
            </div>

            <div class="form_field ">


                <label>


                    <em>*</em>


                    Confirm Email:

                </label>


                <div class="value">


                    <input class="textinput required" id="dwfrm_profile_customer_emailconfirm" type="text"
                           name="dwfrm_profile_customer_emailconfirm" value="sunny243788557@163.com" maxlength="50">
                    <!-- display text area input field -->


                    <span class="hidden json">{label:"Confirm Email"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


                </div>


            </div>


            <!-- Button -->
            <div class="process_buttons">
                <button class="positive step_forward" type="submit" name="dwfrm_profile_customer_editprofile">
                    <span>Save Update</span>
                </button>
            </div>
        </fieldset>
    </form:form>
</div>


<div class="account_wrapper">
    <h5>Change Password</h5>


    <p class="required_caption">
        Fields marked * are required
    </p>


    <form:form action="/myAccountUserEditPassword"    modelAttribute="userd"
          method="post" class="registration_form">
        <fieldset>
            <input type="hidden" name="dwfrm_profile_securekey" value="1233957335">

            <div class="form_field">


                <label>


                    <em>*</em>


                    Existing Password:

                </label>


                <div class="value">


                    <input class="textinputpw required" id="dwfrm_profile_login_existingpassword" type="password"
                           name="oldPassword" value maxlength="20">


                    <span class="hidden json">{label:"Existing Password"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


                </div>


            </div>


            <div class="form_field">


                <label>


                    <em>*</em>


                    Password:

                </label>


                <div class="value">


                    <form:input path="password" class="textinputpw required" id="dwfrm_profile_login_password" type="password"
                                maxlength="20"/>


                    <span class="hidden json">{label:"Password"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


                </div>




						<span class="additional_information">

<img src="resource_account_files/icon_exc.png" class="jsToolTip" rel="tt_password-tooltip">
<div class="jsInfo" id="tt_password-tooltip">


    <div class="contentasset"><!-- dwMarker="content" dwContentID="bdl7giaagRJnaaaacUzXsy9CTb" -->

        <p>Please choose a password with a minimum of 6 characters for your account</p>


    </div>
    <!-- End contentasset -->


</div>

			    		</span>
            </div>

            <div class="form_field">


                <label>


                    <em>*</em>


                    Confirm Password:

                </label>


                <div class="value">


                    <input class="textinputpw required" id="dwfrm_profile_login_passwordconfirm" type="password"
                           name="dwfrm_profile_login_passwordconfirm" value maxlength="20">


                    <span class="hidden json">{label:"Confirm Password"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


                </div>


            </div>

            <div class="process_buttons">
                <button class="positive step_forward" type="submit" name="dwfrm_profile_login_editlogin">
                    <span>Save Update</span>
                </button>
            </div>

        </fieldset>
    </form:form>
</div>
<!-- END: registration -->
</div>
<div class="privacypolicy" id="privacypolicy" style="display:none;overflow:auto;">


</div>

<script type="text/javascript"><!--
var loginChanged = false;
var nameChanged = false;
app.URLs.submitFormURL = "/on/demandware.store/Sites-ROE-Site/en_GB/Account-UpdateName"

function submitForm() {
    // if firstname/lastname change and no other field update the data via AJAX
    // otherwise do normal submit
    if (nameChanged && !loginChanged) {

        if (jQuery("#RegistrationForm").validate().element("[name=dwfrm_profile_customer_firstname]") &&
                jQuery("#RegistrationForm").validate().element("[name=dwfrm_profile_customer_lastname]")) {

            var post = jQuery('#RegistrationForm').serialize();

            jQuery.ajax({
                type:"POST",
                url:app.URLs.submitFormURL,
                data:post,
                dataType:'html',
                success:function (data) {
                    var showurl = "https://shop.bestseller.com/on/demandware.store/Sites-ROE-Site/en_GB/Account-Show";
                    window.location.href = showurl;
                },
                failure:function (data) {
                    alert("Server connection failed!");
                }
            });
        }
    } else {
        jQuery('#registrationformaction').append("<input name='dwfrm_profile_confirm' type='hidden' />");
        jQuery("#RegistrationForm").submit();
    }
}

jQuery(document).ready(function () {

    jQuery('#privacypolicy').dialog({
        bgiframe:true,
        autoOpen:false,
        modal:true,
        height:480,
        width:600,
        title:'See Privacy Policy',
        resizable:false
    });

    jQuery('#privacyPolicy').click(function () {
        jQuery('#privacypolicy').show();
        jQuery('#privacypolicy').dialog('open');
    });

    // keep track of which fields are changed, firstname/lastname are nameChanged, all others are loginChanged
    jQuery('input').change(function (formField) {
        if (formField.currentTarget.id.indexOf("dwfrm_profile_login") >= 0) {
            loginChanged = true;
        } else if (formField.currentTarget.id.indexOf("dwfrm_profile_customer_email") >= 0) {
            loginChanged = true;
        } else if ((formField.currentTarget.id.indexOf("dwfrm_profile_customer_firstname") >= 0) ||
                (formField.currentTarget.id.indexOf("dwfrm_profile_customer_lastname") >= 0)) {
            nameChanged = true;
        }
    });

    // if the select box has a change set the flag
    jQuery('select').change(function (e) {
        loginChanged = true;
    });

    // clear out formfields that could be part of autocomplete
    jQuery("[name=dwfrm_profile_customer_emailconfirm]").val("");
    jQuery("[name=dwfrm_profile_login_password]").val("");
    jQuery("[name=dwfrm_profile_login_passwordconfirm]").val("");
});
//--></script>


</div>